<template>
	<view class="vote-container">
		<!-- 加载中页面 -->
		<cumLoading v-show="loadPage"></cumLoading>
		<!-- 全部选手 -->
		<view class="gyhxxsx-scroll-view-container-wb" v-show="!loadPage">
			<scroll-view class="gyhxxsx-scroll-view-container" scroll-y @scrolltolower="get_lists">
				<!-- 头图header -->
				<view class="header">
					<image class="header-img" src="https://lsol-house-upload.oss-cn-hangzhou.aliyuncs.com/2020-09-29wxls/other/skisVoteApp20240115/header.jpg" mode="widthFix"></image>
					<view class="myPrize" @click="enterMyCard">我的奖品</view>
				</view>
				<!-- 主体部分 -->
				<view class="main-container">
					<!-- 页面显示的数据 -->
					<view class="pageData-container">
						<view class="item-pageData" :class="{'last-item-pageData':index === pageData.length - 1 }" v-for="(item,index) in pageData">
							<view class="num-item-pageData">{{ item.num }}</view>
							<view class="name-item-pageData">{{ item.name }}</view>
						</view>
					</view>
					<!-- 页面活动入口 -->
					<view class="pageActive-container" @click="IWantJoin">{{ getVoteTime }}</view>
					<!-- 搜索模块 -->
					<view class="search-container">
						<view class="input-wrap">
							<view class="iconfont">&#xe60c;</view>
							<input class="input-box" type="text" placeholder="请输入序号查询" v-model="form.rankNum"/>
						</view>
						<view class="searchBtn" @click="onSearchBtn">确认</view>
					</view>
					<!-- 内容模块 -->
					<view class="main-vote-container">
						<view class="item-main" v-for="(item,index) in tableData" :key="item.id">
							<view class="thumb-box">
								<image class="thumb" :src="item.img" mode="aspectFill" @click="previewImage(item)"></image>
								<view class="thumb-rankNum">{{ item.rankNum || 0}}号作品</view>
							</view>
							<view class="name-box">
								<text class="title">名称:</text>
								<text class="">{{ item.title }}</text>
							</view>
							<view class="dec-box">
								<text class="dec-title">描述:</text>
								<text class="dec">{{ item.content }}</text>
							</view>
							<view class="vote-box" @click="popupVoteShowBtn(item,index)">
								<view class="vote-number">{{ item.voteNum }}票</view>
								<view class="vote-btn">投票</view>
							</view>
							<view class="look-dec-btn" @click="popupReadDecShowBtn(item,index)">查看简介</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 投票弹出层 -->
		<view class="popup-container" v-if="popupVoteShow">
			<view class="popup__content">
				<view class="popup__wrapper">
					<view class="popup-dialog">
						<view class="dialog-title">{{ `当前正在给${personInfo.work.title }投票`}}</view>
						<view class="dialog-content">
							<view class="item-vote-dialog-content">
								<view>当前剩余票数:</view>
								<view>{{ getVoteNum }}票</view>
								<view class="item-vote-read-btn" @click="popupReadShowBtn">(点击增加票数)</view>
							</view>
							<view class="item-vote-num-dialog-content">
								<view>投票</view>
								<uni-number-box :min="1" :max="personInfo.voteNum || 1" v-model="form.voteNum" />
							</view>
						</view>
						<view class="dialog-button-group">
							<view class="dialog-button" @click="popupVoteHideBtn">取消</view>
							<view class="dialog-button border-left ac-dialog-button" @click="onVoteSubmit">确认</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 阅读文章弹出层 -->
		<view class="popup-container" v-if="popupReadShow">
			<view class="popup__content">
				<view class="popup__wrapper">
					<view class="popup-dialog">
						<view class="dialog-title">完成三篇阅读即可增加三次投票机会</view>
						<view class="dialog-content">
							<view class="item-read-article-box-container">
								<div class="item-read-article-box" v-for="(item,index) in readList" @click="readArticleClick(item,index)">
									<div class="newsTitle-item-read-article-box">{{ item.newsTitle }}</div>
									<div class="select-item-box">
										<div class="select-item-xbox" :class="{'select-ticket-item-box-ac':!item.read}">{{ item.read | formatReadFLag }}</div>
									</div>
								</div>
							</view>
						</view>
						<view class="dialog-button-group">
							<view class="dialog-button" @click="popupReadHideBtn">关闭</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 阅读文章简介 -->
		<view class="popup-container" v-if="popupReadDecShow">
			<view class="popup__content">
				<view class="popup__wrapper">
					<view class="popup-dialog">
						<view class="dialog-title">{{ `${personInfo.work.title }的简介`}}</view>
						<view class="dialog-content">
							<view class="item-read-dec-article-box-container">
								<view class="text-black-html" v-html="personInfo.work.content"></view>
							</view>
						</view>
						<view class="dialog-button-group">
							<view class="dialog-button" @click="popupReadDecHideBtn">关闭</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cumLoading from '@/components/cum-loading/cum-loading.vue'
	import * as api from '@/server/getData.js'
	import * as constant from '@/constant/index.js'
	import { isUniApp,loadPage,lockScreen,pzInfo,appchat,wechat } from '@/utils/mixin.js'
	import * as utils from '@/utils/index.js'
	import { mapMutations } from 'vuex'
	const moment = require('moment')
	moment.locale('zh-cn')
	export default {
		components:{cumLoading},
		mixins:[isUniApp,loadPage,lockScreen,pzInfo,appchat,wechat],
		filters:{
			formatReadFLag(type){
				return constant.readFLag(type)
			}
		},
		computed:{
			getVoteNum(){
				return this.personInfo.voteHasNum - this.personInfo.votebBeenNum
			},
			getVoteTime(){
				if(this.pzInfo && this.pzInfo.vote){
					const currentTime = moment().valueOf() // 当前时间
					if(currentTime - this.pzInfo.vote.startTime * 1 < 0){
						return `活动开始时间:${moment(this.pzInfo.vote.startTime * 1).format('YYYY-MM-DD HH:mm:ss')}`
					}else if(this.pzInfo.vote.startTime * 1 < currentTime && currentTime < this.pzInfo.vote.endTime * 1){
						return '我要参加'
					}else{
						return '活动已结束'
					}
				}
			}
		},
		data(){
			return {
				options:null, //Url参数
				loadPage:true,
				pageData:[], //页面数据
				form:{
					rankNum:'',
					voteNum:1
				},
				listQuery: {
					page: 1, // 当前的页码
					limit: 10, // 一页显示几条
					total: 0 // 总条数
				},
				tableData: [], // 数据列表
				isLoading: false,
				isLoadEnd:false,
				popupVoteShow:false, //投票弹出层
				personInfo:{
					work:{},
					index:0,
					voteNum:0, //当前剩余的票数
					voteHasNum:0, //当前总票数
					votebBeenNum:0 //当前已投票数
				},
				popupReadShow:false, //阅读弹出层
				readList:[],
				isReadClick:false,
				isPageClick:false, //页面
				popupReadDecShow:false, //页面详情简介
			}
		},
		async onLoad(options){
			this.options = options
			try{
				await this.init_load()
			}catch(e){
				//TODO handle the exception
			}finally{
				this.loadPage = false
			}
		},
		methods:{
			...mapMutations(['setToken']),
			async init_load(){
				this.get_isUniApp()
				this.startPlusReady()
				await this.get_peizhi()
				// if(!this.isUniApp){
				// 	window.location = this.pzInfo.share.wxLink
				// 	return
				// }
				await this.onShare()
				if (!this.options.wxlsToken && !uni.getStorageSync(constant.TOKEN)) {
					this.navToLogin()
					return
				}
				if(this.options.wxlsToken){
					this.setToken(this.options.wxlsToken)
				}
				await this.get_pageView() //获取阅读量
				await this.get_myVoteNums() //获取我的票数
				await this.get_lists() //列表
				await this.get_need_read_list() // 获取阅读文章列表
			},
			async get_pageView(){
				try{
					const res = await api.work.pageView()
					this.pageData = [ { num:res.reportCount || 0, name:'参赛数' }, { num:res.voteCount || 0, name:'投票数' }, { num:res.lookCount || 0, name:'访问量' }]
				}catch(e){
					this.pageData = [ { num:0, name:'参赛数' }, { num: 0, name:'投票数' }, { num:0, name:'访问量' } ]
				}
			},
			async get_lists() {
				if (this.isLoadEnd) return
				if (this.isLoading) return
				try {
					this.isLoading = true
					const res = await api.work.list({
						size: this.listQuery.limit,
						page: this.listQuery.page,
						 ...Object.fromEntries(Object.entries(this.form).filter((item) => item[1] !== '').filter((item) => item[0] !== 'voteNum'))
					})
					this.tableData = this.tableData.concat(res.records)
					this.listQuery.total = Math.ceil(res.total / this.listQuery.limit)
					if (this.listQuery.page < this.listQuery.total) {
						this.listQuery.page = this.listQuery.page + 1
					} else {
						this.isLoadEnd = true
					}
				} catch (e) {
					
				} finally {
					this.isLoading = false
				}
			},
			async onSearchBtn(){
				this.resetData()
				await this.get_lists()
			},
			resetData(){
				this.isLoadEnd = false
				this.listQuery.page = 1
				this.listQuery.limit = 10
				this.listQuery.total = 0
				this.tableData = []
			},
			// 分享
			onShare(){
				const commonParams = {
					title: this.pzInfo.share.title,
					desc: this.pzInfo.share.desc,
					imgUrl: this.pzInfo.share.imgUrl,
					link:`${this.pzInfo.share.wxLink}?time=${new Date().getTime()}`
				}
				if(this.isUniApp){
					this.get_app_init({
						needShare: this.pzInfo.share.needShare,
						strShareId: this.pzInfo.md.strShareId,
						strClassId: this.pzInfo.md.strClassId,
						strClassName: this.pzInfo.md.strClassName,
						...commonParams
					})
				}
			},
			// 获取阅读列表
			async get_need_read_list(){
				const res = await api.read.list({buzId:constant.yAppColumn,quantity:constant.yAppQuantity})
				this.readList = res
			},
			// 读文章详情
			async readArticleClick(item,index){
				if(this.isReadClick) return
				try{
					this.isReadClick = true
					await api.read.read({
						buzId:constant.yAppColumn,
						articleId:item.articleId,
						timestamp:Date.now(),
						index:item.index
					})
					const timer = setTimeout(()=>{
						clearTimeout(timer)
						this.$set(this.readList[index],'read',true)
					},500)
					h5uni.navigateTo({
						url:`/pages/shows/index?id=${item.sourceArticleId}`
					})
				}catch(e){
					
				}finally{
					this.isReadClick = false
				}
			},
			// 获取用户当前投票数
			async get_user_has_vote_num(){
				const res = await api.vote.voteNumber()
				this.personInfo.voteHasNum = res
			},
			// 获取用户已完成投票数
			async get_user_has_been_vote_num(){
				const res = await api.vote.haveBeenVoteNumber()
				this.personInfo.votebBeenNum = res
			},
			// 投票接口
			async onVoteSubmit(){
				if(this.getVoteNum < 1){
					uni.showToast({
						title: '票数不足',
						duration: 2000,
						icon:'none'
					});
					return
				}
				if(this.form.voteNum > this.getVoteNum) return
				try{
					
					let voteNum = 0
					uni.showLoading({ title: '投票中' })
					const res = await api.vote.vote({ reportId:this.personInfo.work.id,voteNum: this.form.voteNum })
					if(!res){
						uni.showToast({
							title: '投票失败',
							duration: 2000,
							icon:'none'
						});
						return
					}
					this.personInfo.votebBeenNum += this.form.voteNum
					this.tableData[this.personInfo.index].voteNum += this.form.voteNum
					this.form.voteNum = 1
					this.popupVoteHideBtn()
				}catch(e){}finally{
					uni.hideLoading()
				}
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			},
			enterMyCard(){
				h5uni.navigateTo({
					url: `/pages/webview/index?url=https://wap2.wxls.pro/coupon/?time=${new Date().getTime()}#/pages/coupon/myCoupon?commodityType=0&time=${new Date().getTime()}`, // 跳转个人卡包
				})
			},
			async popupVoteShowBtn(item,index){
				if(this.isPageClick) return
				try{
					this.isPageClick = true
					uni.showLoading({ title: '加载中' })
					await this.get_user_has_vote_num()
					await this.get_user_has_been_vote_num()
					this.personInfo.work = item
					this.personInfo.index = index
					this.personInfo.voteNum = this.personInfo.voteHasNum - this.personInfo.votebBeenNum
					// this.personInfo.voteNum 投票数少于1 唤起阅读 大于等于1 存在票数 投票
					if(this.personInfo.voteNum < 1){
						this.popupReadShow = true
					}else{
						this.popupVoteShow = true
					}
				}catch(e){}finally{
					this.isPageClick = false
					uni.hideLoading()
				}
			},
			popupVoteHideBtn(){
				this.popupVoteShow = false
			},
			popupReadShowBtn(){
				this.popupReadShow = true
			},
			async popupReadHideBtn(){
				if(this.isPageClick) return
				try{
					this.isPageClick = true
					uni.showLoading({ title: '关闭中' })
					await this.get_user_has_vote_num()
					this.popupReadShow = false
				}catch(e){}finally{
					this.isPageClick = false
					uni.hideLoading()
				}
			},
			popupReadDecShowBtn(item,index){
				this.personInfo.work = item
				this.personInfo.index = index
				this.popupReadDecShow = true
			},
			popupReadDecHideBtn(){
				this.popupReadDecShow = false
			},
			navToLogin(){
				const _this = this
				uni.showModal({
					title: '提示',
					content: '需要登录才能使用',
					cancelText: '以后再说',
					confirmText: '前往登录',
					success: function (res) {
						if (res.confirm) {
							h5uni.redirectTo({url:`/pages/user/back_login?url=${_this.pzInfo.share.appLink}`})
						} else if (res.cancel) {
							h5uni.switchTab({ url: '/pages/index/index' })
						}
					}
				})
			},
			// 预览图片
			previewImage(item){
				uni.previewImage({
					urls: [item.img],
				})
			},
			// 我要参加按钮
			IWantJoin(){
				if(this.getVoteTime === '我要参加'){
					 this.navTo('/pages/form/index')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	.vote-container{
		height: 100%;
		.gyhxxsx-scroll-view-container-wb{
			background-color: #7fbffb;
			height: 100%;
		}
		.gyhxxsx-scroll-view-container{
			height: 100%;
		}
		.header{
			width: 100%;
			font-size: 0;
			position: relative;
			.header-img{
				width: 100%;
			}
			.myPrize{
				font-size: 30rpx;
				position: absolute;
				bottom: 10rpx;
				right: 0;
				background-color: rgba(0, 0, 0, .6);
				color: #FFF;
				padding: 4rpx 14rpx 4rpx 20rpx;
				border-top-left-radius: 30rpx;
				border-bottom-left-radius: 30rpx;
			}
		}
		.main-container{
			background-color: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			// 页面显示的数据
			.pageData-container{
				display: flex;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				.item-pageData{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-right: 1px dashed #999;
					.num-item-pageData{
						font-size: 32rpx;
						color: #666;
						margin-bottom: 8rpx;
					}
					.name-item-pageData{
						font-size: 28rpx;
						color: #999;
					}
				}
				.last-item-pageData{
					border: none;
				}
			}
			// 页面活动入口
			.pageActive-container{
				height: 70rpx;
				background-color: #409EFF;
				color: #fff;
				border-radius: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;
			}
			// 搜索模块
			.search-container{
				display: flex;
				width: 100%;
				height: 74rpx;
				margin-bottom: 20rpx;
				.input-wrap{
					display: flex;
					align-items: center;
					border: 1px solid #eee;
					border-radius: 4px;
					padding-left: 20rpx;
					width: 100%;
					.input-box{
						margin-left: 10rpx;
						height: 100%;
						flex: 1;
					}
				}
				.searchBtn{
					flex-shrink: 0;
					padding-left: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			// 内容模块
			.main-vote-container{
				display: grid;
				row-gap: 14rpx;
				column-gap: 14rpx;
				grid-template-columns: repeat(2, 1fr);
				// grid-template-rows: masonry;
				// align-items: center;
				.item-main{
					width: 100%;
					border: 1px solid #eee;
					border-radius: 6px;
					overflow: hidden;
					.thumb-box{
						width: 100%;
						height: 252rpx;
						position: relative;
						.thumb{
							width: 100%;
							height: 100%;
						}
						.thumb-rankNum{
							position: absolute;
							top: 0;
							left: 0;
							background-color: #409EFF;
							border-top-right-radius: 6rpx;
							border-top-right-radius: 30rpx;
							border-bottom-right-radius: 30rpx;
							width: 140rpx;
							height: 50rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #FFF;
							font-size: 24rpx;
						}
					}
					.name-box{
						font-size: 26rpx;
						padding: 6rpx 10rpx;
						color: #000;
						.title{
							color: #666;
							padding-right: 10rpx;
						}
					}
					.dec-box{
						font-size: 26rpx;
						padding: 0 10rpx;
						height: 74rpx;
						color: #000;
						display: -webkit-box; /* 必须设置display属性为-webkit-box */
						overflow: hidden; /* 超出部分隐藏 */
						text-overflow: ellipsis; /* 显示省略号 */
						-webkit-line-clamp: 2; /* 限制显示两行 */
						-webkit-box-orient: vertical; /* 垂直方向上的换行 */
						.dec-title{
							color: #666;
							padding-right: 10rpx;
						}
					}
					.vote-box{
						display: flex;
						margin: 10rpx;
						font-size: 24rpx;
						background-color: #409EFF;
						color: #fff;
						padding: 10rpx 0;
						border-radius: 2px;
						.vote-number{
							flex: 1;
							border-right: 1px solid #eee;
							text-align: center;
						}
						.vote-btn{
							width: 30%;
							text-align: center;
						}
					}
					.look-dec-btn{
						margin: 10rpx 10rpx 20rpx;
						font-size: 24rpx;
						background-color: #409EFF;
						color: #fff;
						padding: 10rpx 0;
						border-radius: 2px;
						text-align: center;
					}
				}
			}
		}
		.popup-container{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .4);
			.popup__content{
				height: 100%;
				.popup__wrapper{
					height: 100%;
					transform: scale(1);
					opacity: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.popup-dialog{
						width: 700rpx;
						border-radius: 22rpx;
						background-color: #fff;
						.dialog-title{
							display: flex;
							justify-content: center;
							padding: 30rpx 14rpx 20rpx;
							color: #000;
							font-weight: bold;
						}
						.dialog-content{
							font-size: 30rpx;
							color: #333;
							line-height: 1.573;
							.item-vote-dialog-content{
								display: flex;
								padding-top: 14rpx;
								padding-bottom: 14rpx;
								margin-bottom: 40rpx;
								background-color: #ffece0;
								color: #ed6b37;
								padding-left: 32rpx;
								padding-right: 32rpx;
								.item-vote-read-btn{
									text-decoration: underline;
								}
							}
							.item-vote-num-dialog-content{
								padding-bottom: 80rpx;
								padding-left: 32rpx;
								padding-right: 32rpx;
								display: flex;
								justify-content: space-between;
							}
							.item-dialog-content{
								// padding-top: 20rpx;
								padding-bottom: 20rpx;
								padding-left: 32rpx;
								padding-right: 32rpx;
							}
							.item-read-article-box-container{
								padding-left: 20rpx;
								padding-right: 20rpx;
								.item-read-article-box{
									background-color: #ffece0;
									border-radius: 10rpx;
									color: #000;
									display: flex;
									margin-bottom: 30rpx;
									padding: 10rpx 0 10rpx 20rpx;
								}
								.newsTitle-item-read-article-box{
									flex: 1;
									flex-shrink: 0;
									font-size: 28rpx;
								}
								.select-item-box{
									display: flex;
									justify-content: center;
									align-items: center;
									width: 180rpx;
									border-radius: 4px;
								}
								.select-item-xbox{
									font-size: 24rpx;
									background-color: #999;
									width: 140rpx;
									height: 60rpx;
									border-radius: 60rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									color: #FFF;
								}
								.select-ticket-item-box-ac{
									background-color: #ed6b37;
								}
							}
							.item-read-dec-article-box-container{
								padding-left: 20rpx;
								padding-right: 20rpx;
								padding-bottom: 20rpx;
								.text-black-html{
									white-space: pre-line;
								}
							}
						}
						.dialog-button-group{
							display: flex;
							flex-direction: row;
							border-top: 1px solid #f5f5f5;
							.dialog-button{
								display: flex;
								flex: 1;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								height: 90rpx;
							}
							.border-left{
								border-left: 1px solid #f5f5f5;
							}
							.ac-dialog-button{
								color: #007aff;
							}
						}
					}
				}
				.ac_popup__wrapper{
					transform: scale(1);
					opacity: 1;
				}
			}
		}
	}
</style>